<template>
  <view class="pics">
    <!-- 左侧分类滚动栏 -->
    <scroll-view class="left" scroll-y>
      <view
        @click="leftClickHandle(index, item.id)"
        :class="active === index ? 'active' : ''"
        v-for="(item, index) in cates"
        :key="item.id"
      >
        {{ item.title }}
      </view>
    </scroll-view>

    <!-- 右侧图片滚动栏 -->
    <scroll-view class="right" scroll-y>
      <!-- 加载中提示 -->
      <view class="loading" v-if="isLoading">加载中...</view>

      <!-- 图片列表（加载完成且有数据时显示） -->
      <view class="item" v-for="item in secondData" :key="item.id" v-else>
        <image 
          @click="previewImg(item.img_url)" 
          :src="item.img_url" 
          mode="widthFix"  <!-- 保持图片比例，宽度适配父容器 -->
        ></image>
        <text>{{ item.title }}</text>
      </view>

      <!-- 无数据提示（加载完成且无数据时显示） -->
      <view class="no-data" v-if="!isLoading && secondData.length === 0">暂无数据</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cates: [],          // 左侧分类列表
      active: 0,          // 当前激活的分类索引
      secondData: [],     // 右侧图片列表
      isLoading: false    // 加载锁（防止重复请求）
    };
  },
  methods: {
    /**
     * 获取左侧分类列表
     */
    async getPicsCate() {
      try {
        const res = await this.$myRequest({
          url: "/api/getimgcategory"
        });
        // 接口数据兜底（避免返回undefined导致报错）
        this.cates = res.data?.message || [];
        // 初始化第一个分类的图片（确保数组有值再调用）
        if (this.cates.length > 0) {
          this.leftClickHandle(0, this.cates[0].id);
        }
      } catch (err) {
        console.error("获取分类失败：", err);
        // 给用户错误提示
        uni.showToast({ title: "分类加载失败", icon: "none", duration: 2000 });
      }
    },

    /**
     * 切换左侧分类，获取对应图片
     * @param {number} index - 分类索引
     * @param {number} id - 分类ID
     */
    async leftClickHandle(index, id) {
      // 防止重复请求（加载中）或重复点击当前分类
      if (this.isLoading || this.active === index) return;

      this.isLoading = true;  // 开启加载锁
      this.active = index;    // 更新激活状态
      try {
        const res = await this.$myRequest({
          url: `/api/getimages/${id}`  // 模板字符串简化URL拼接
        });
        // 接口数据兜底
        this.secondData = res.data?.message || [];
      } catch (err) {
        console.error("获取图片失败：", err);
        uni.showToast({ title: "图片加载失败", icon: "none", duration: 2000 });
        // 失败时重置激活状态（可选，提升体验）
        this.active = this.cates.findIndex(item => item.id === id);
      } finally {
        this.isLoading = false;  // 无论成功失败，释放加载锁
      }
    },

    /**
     * 预览图片
     * @param {string} current - 当前点击的图片URL
     */
    previewImg(current) {
      // 提取所有图片URL组成预览数组
      const urls = this.secondData.map(item => item.img_url);
      // 调用uni-app图片预览API
      uni.previewImage({
        current,    // 当前显示图片的URL
        urls,       // 需要预览的图片URL列表
        loop: true, // 支持循环预览
        indicator: "number"  // 显示页码指示器（可选：'default'/'number'/false）
      });
    }
  },
  // 页面加载时初始化数据
  onLoad() {
    this.getPicsCate();
  }
};
</script>

<style lang="scss">
// 1. 修复核心问题：定义SCSS变量（若用全局变量，可替换为@import "../../styles/global.scss";）
$shop-color: #ff4400;    // 主题色（可根据项目调整）
$border-color: #eee;     // 通用边框色
$font-size-base: 30rpx;  // 基础字体大小

// 页面高度占满屏幕
page {
  height: 100%;
  background-color: #f5f5f5;
}

.pics {
  height: 100%;
  display: flex;  // 左右布局

  // 左侧分类栏
  .left {
    width: 200rpx;
    height: 100%;
    background-color: #fff;
    border-right: 1px solid $border-color;

    view {
      height: 120rpx;          // 用rpx适配移动端
      line-height: 120rpx;     // 垂直居中
      text-align: center;
      font-size: $font-size-base;
      color: #333;
      border-top: 1px solid $border-color;
      // 点击反馈（提升交互体验）
      &:active {
        background-color: #f9f9f9;
      }
    }

    // 激活态样式
    .active {
      background-color: $shop-color;
      color: #fff;
      border-left: 4rpx solid #ff2d4a;  // 左侧激活标识
      font-weight: 500;                 // 加粗突出
    }
  }

  // 右侧图片栏
  .right {
    flex: 1;  // 占满剩余宽度（适配不同屏幕）
    height: 100%;
    padding: 20rpx;          // 内边距
    box-sizing: border-box;  // 避免padding撑大宽度

    // 加载中提示
    .loading {
      width: 100%;
      height: 200rpx;
      line-height: 200rpx;
      text-align: center;
      font-size: $font-size-base;
      color: #999;
    }

    // 图片项
    .item {
      margin-bottom: 30rpx;  // 图片间距
      background-color: #fff;
      padding: 20rpx;
      border-radius: 10rpx;  // 圆角
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);  // 轻微阴影

      image {
        width: 100%;         // 宽度适配父容器
        height: auto;        // 保持图片比例，避免拉伸
        border-radius: 8rpx;
      }

      text {
        display: block;      // 独占一行
        margin-top: 15rpx;
        font-size: $font-size-base;
        color: #666;
        line-height: 40rpx;
      }
    }

    // 无数据提示
    .no-data {
      width: 100%;
      height: 200rpx;
      line-height: 200rpx;
      text-align: center;
      font-size: $font-size-base;
      color: #999;
    }
  }
}
</style>